$(function () {


    // 导入layui相关组件
    const form = layui.form
    const layer = layui.layer
    // 富文本编辑器
    var tinymce = null
    // 图片裁剪
    var $image = null
    /*******初始化图片裁剪区******/
    // 1.1 获取裁剪区域的 DOM 元素
    $image = $('#image')
    // 1.2 配置选项
    const options = {
        // 纵横比
        aspectRatio: 400 / 280,
        // 指定预览区域
        preview: '.img-preview'
    }
    // 1.3 创建裁剪区域
    $image.cropper(options)
    /*************/

    // 先获取传递过来的文章的ID值
    function grtArtId () {
        // 解析传过来的文章的id值
        let url = location.search; //获取url中"?"符后的字串 ('?id=1001&name=lisi')
        let theRequest = {};
        if (url.indexOf("?") != -1) {
            let str = url.substr(1); //substr()方法返回从参数值开始到结束的字符串；
            let strs = str.split("&");
            for (let i = 0; i < strs.length; i++) {
                theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
            }
            // console.log(theRequest); 
            // 此时的theRequest就是我们需要的参数；对象
            return theRequest
        }
    }

    // 定义一个变量保存文章内容数据
    var artInfo = {}
    // 定义 初始化修改页面
    function initEditPage () {

        // 初始化富文本编辑器
        // initEditor()
        // 先获取文章的id
        const params = grtArtId()
        const id = params.id
        $.ajax({
            method: 'get',
            url: '/my/article/' + id,
            success: function (res) {
                console.log(res);
                if (res.status !== 0) {
                    return layer.msg('获取文章信息失败！')
                }
                layer.msg('获取文章信息成功')
                // 赋值
                artInfo = res.data
                // 调用--获取文章类别，渲染下拉框
                getCate()
                // 初始化富文本编辑器
                initEditor()
                // 重新渲染图片，将请求到的图片路径渲染到页面
                $image
                    .cropper('destroy')      // 销毁旧的裁剪区域
                    .attr('src', 'http://api-breakingnews-web.itheima.net' + artInfo.cover_img)  // 重新设置图片路径
                    .cropper(options)        // 重新初始化裁剪区域

                // 渲染表单数据
                form.val("form-pub", artInfo)
            }
        })
    }
    // 初始化修改页面
    initEditPage()


    // 定义--获取文章类别的方法
    function getCate () {
        $.ajax({
            method: 'get',
            url: '/my/article/cates',
            success: function (res) {
                if (res.status !== 0) {
                    return layer.msg('获取分类失败！')
                }
                // 渲染模板
                const htmlStr = template('tpl-cate', res)
                $('[name=cate_id').html(htmlStr)
                // 使用layui的form.render(type, filter);方法
                // 让layui重新渲染页面数据,参考官方文档
                form.render('select');

                // 渲染下拉框之后，指定选择项
                // 方法一
                // var select = 'dd[lay-value=' + artInfo.cate_id + ']';
                // $('select').siblings("div.layui-form-select").find('dl').find(select).click();
                // 方法二   可以换成 prop("selected", true);
                // $("[name=cate_id]").find("option[value=" + artInfo.cate_id + "]").prop("selected", 'selected');
                // form.render();
                // 方法三 可以换成 attr("selected", true)
                $("select option[value=" + artInfo.cate_id + "]").attr("selected", "selected");
                form.render('select');
            }
        })
    }

    // 选择封面 的按钮，绑定点击事件
    $('#btnChooseImage').on('click', function () {
        // 手动触发文件选择框的点击事件
        $('#coverFile').click()
    })
    // 监听文件选择框的change事件
    $('#coverFile').on('change', function (e) {
        // 获取到文件列表数组
        const files = e.target.files
        if (files.length === 0) {
            // 如果没有选择文件，退出
            return
        }
        // 将图片转换为url地址
        let newImgURL = URL.createObjectURL(files[0])
        // 重新初始化裁剪区域
        $image
            .cropper('destroy')      // 销毁旧的裁剪区域
            .attr('src', newImgURL)  // 重新设置图片路径
            .cropper(options)        // 重新初始化裁剪区域
    })

    // 文章的发布状态，默认为 已发布 
    var artState = '已发布'
    //  点击“存为草稿”按钮，会修改状态为 草稿
    $('#btnSave2').on('click', function (e) {
        e.preventDefault
        artState = '草稿'
    })

    // 监听表单的提交事件
    $('#form-pub').on('submit', function (e) {
        // 1阻止默认提交
        e.preventDefault()
        console.log('----' + $('textarea').val());
        // 2
        let fd = new FormData($(this)[0])
        // 3追加状态属性
        fd.append('state', artState)
        fd.append('Id', artInfo.Id)
        // fd.forEach((v, k) => {
        //     console.log(k, v);
        // })
        // 更换成最新的内容
        newContent = tinyMCE.get('art-content').getContent()
        fd.set('content', newContent)
        // 4将图片封面裁剪后的图片，输出为一个文件对象
        $image
            .cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
                width: 400,
                height: 280
            })
            .toBlob(function (blob) {       // 将 Canvas 画布上的内容，转化为文件对象
                // 得到文件对象后，进行后续的操作
                // 5将文件追加到fd中
                fd.append('cover_img', blob)
                // fd.forEach((v, k) => {
                //     console.log(k, v);
                // })

                // 最后调用方法 发起ajax请求
                publishArticle(fd)
            })
    })

    // 修改文章的方法
    function publishArticle (fd) {
        // fd.forEach((v, k) => {
        //     console.log(k, v);
        // })
        // 发起请求
        $.ajax({
            method: 'post',
            url: '/my/article/edit',
            data: fd,
            // 如果向服务器提交的是 FormData格式的数据
            // 必须添加以下两个配置项
            contentType: false,
            processData: false,
            success: function (res) {
                // console.log(res);
                if (res.status !== 0) {
                    return layer.msg('发布文章失败')
                }
                layer.msg('发布文章成功！')
                // 跳转到文章列表页面
                location.href = '/article/art_list.html'
            }
        })
    }

    $('#btnLog').on('click', function (e) {
        // e.preventDefault()
        // 这两个是获取编辑框的内容
        console.log(tinyMCE.get('art-content').getContent());
        console.log(tinyMCE.activeEditor.getContent());
    })
})